<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>物资分析看板</title>
    <!-- 引入外部资源 -->
    <script src="../public/js/tailwindcss3.4.16"></script>
    <link href="../font-awesome/css/all.min.css" rel="stylesheet">
    <script src="../chart.umd.min.js"></script>
    <link rel="stylesheet" href="style.css">

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0FC6C2',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        success: '#00B42A',
                        info: '#86909C',
                        light: '#F2F3F5',
                        dark: '#1D2129',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                },
            }
        }
    </script>
    <style>
    /* 折叠时隐藏侧边栏文字，仅显示图标 */
    .sidebar-collapsed span,
    .sidebar-collapsed .text-xs,
    .sidebar-collapsed .font-semibold,
    .sidebar-collapsed h1 {
        display: none !important;
    }
    .sidebar-collapsed nav {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Tab按钮样式 */
    .tab-btn {
        background-color: #f2f3f5;
        color: #86909c;
        border: 1px solid transparent;
    }
    .tab-btn:hover {
        background-color: #e5e6eb;
        color: #4e5969;
    }
    .tab-btn.active {
        background-color: #165DFF;
        color: white;
        border-color: #165DFF;
    }
    
    /* 物资类别Tab按钮样式 */
    .category-tab-btn {
        background-color: #f2f3f5;
        color: #86909c;
        border: 1px solid transparent;
    }
    .category-tab-btn:hover {
        background-color: #e5e6eb;
        color: #4e5969;
    }
    .category-tab-btn.active {
        background-color: #165DFF;
        color: white;
        border-color: #165DFF;
    }
    
    /* 型号Tab按钮样式 */
    .model-tab-btn {
        background-color: #f2f3f5;
        color: #86909c;
        border: 1px solid transparent;
    }
    .model-tab-btn:hover {
        background-color: #e5e6eb;
        color: #4e5969;
    }
    .model-tab-btn.active {
        background-color: #165DFF;
        color: white;
        border-color: #165DFF;
    }
    
    /* 模态框型号Tab按钮样式 */
    .modal-model-tab-btn {
        background-color: #f2f3f5;
        color: #86909c;
        border: 1px solid transparent;
    }
    .modal-model-tab-btn:hover {
        background-color: #e5e6eb;
        color: #4e5969;
    }
    .modal-model-tab-btn.active {
        background-color: #165DFF;
        color: white;
        border-color: #165DFF;
    }
    </style>
</head>
<body class="font-inter bg-gray-50 text-dark">
<!-- 顶部导航栏 -->
<header class="bg-white fixed top-0 left-0 right-0 z-50 nav-shadow">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
        <div class="flex items-center space-x-2">
            <!-- 侧边栏折叠/展开按钮 -->
            <button id="toggleSidebar" class="mr-2 text-primary text-2xl focus:outline-none">
                <i class="fa fa-bars"></i>
            </button>
            <h1 class="text-xl font-bold text-primary">物资分析看板</h1>
        </div>

        <div class="flex items-center space-x-4">
            <div class="relative">
                <input type="text" placeholder="搜索指标..." class="pl-10 pr-4 py-2 rounded-full border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
                <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
            </div>

            <div class="relative">
                <button class="flex items-center space-x-1 text-gray-600 hover:text-primary transition-colors">
                    <i class="fa fa-bell text-lg"></i>
                    <span class="absolute -top-1 -right-1 bg-danger text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">5</span>
                </button>
            </div>

            <div class="flex items-center space-x-2">
                <img src="../public/image/user.jpg" alt="用户头像" class="h-8 w-8 rounded-full object-cover border-2 border-primary">
                <span class="text-sm font-medium">管理员</span>
            </div>
        </div>
    </div>
</header>

<!-- 侧边栏导航 -->
<aside id="sidebar" class="fixed top-0 left-0 bottom-0 w-64 bg-white pt-16 nav-shadow z-40 transition-all duration-300 ease-in-out transform">
    <div class="h-full overflow-y-auto scrollbar-hide">
        <nav class="p-4 space-y-1">
            <div class="text-xs uppercase text-gray-400 font-semibold mb-2 pl-2">分析维度</div>

            <a href="#plan-management" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-calendar-check text-lg w-5 text-center"></i>
                <span>计划管理</span>
            </a>

            <a href="#purchase-execution" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-shopping-cart text-lg w-5 text-center"></i>
                <span>采购执行</span>
            </a>

            <a href="#inventory-operation" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-warehouse text-lg w-5 text-center"></i>
                <span>库存运营</span>
            </a>

            <a href="#amount-flow" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-money-bill text-lg w-5 text-center"></i>
                <span>金额流转</span>
            </a>

            <a href="#material-category" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-cubes text-lg w-5 text-center"></i>
                <span>物料品类</span>
            </a>

            <a href="#supplier-management" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-building text-lg w-5 text-center"></i>
                <span>供应商管理</span>
            </a>

            
            <div class="text-xs uppercase text-gray-400 font-semibold mb-2 pl-2">分析看板</div>
            
            <a href="../客户分析看板html5/customer.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-users text-lg w-5 text-center"></i>
                <span>1.客户</span>
            </a>
            <a href="../供应商分析看板html5/supplier.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-truck text-lg w-5 text-center"></i>
                <span>2.供应商</span>
            </a>
            <a href="../物资分析看板html5/materials.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-cubes text-lg w-5 text-center"></i>
                <span>3.物资</span>
            </a>
            <a href="../产品分析看板html5/product.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-cube text-lg w-5 text-center"></i>
                <span>4.产品</span>
            </a>
            <a href="../人员分析看板html5/index.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-user-friends text-lg w-5 text-center"></i>
                <span>5.人员</span>
            </a>
            <a href="../业务领域分析看板html5/index.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-sitemap text-lg w-5 text-center"></i>
                <span>6.业务领域</span>
            </a>
            <a href="../型号项目成本分析看板html5/index.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-calculator text-lg w-5 text-center"></i>
                <span>7.型号项目成本</span>
            </a>
            <a href="../财务指标分析看板html5/index.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-chart-line text-lg w-5 text-center"></i>
                <span>8.财务指标</span>
            </a>
            <a href="../固定资产投资效果分析看板html5/index.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-building text-lg w-5 text-center"></i>
                <span>9.固定资产投资效果</span>
            </a>
            <a href="../研发创新效果分析看板html5/index.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-flask text-lg w-5 text-center"></i>
                <span>10.研发创新效果</span>
            </a>
        </nav>
    </div>
</aside>

<!-- 主内容区 -->
<main id="mainContent" class="pt-16 pb-10 pl-64 min-h-screen">
    <div class="container mx-auto px-4 py-6">
        <!-- 筛选条件区域 -->
        <div class="bg-white rounded-xl p-4 mb-6 card-shadow">
            <div class="flex flex-wrap items-center justify-between gap-4">
                <div class="flex flex-wrap items-center gap-4">
                    <div class="flex items-center">
                        <span class="text-gray-600 mr-2">时间:</span>
                        <select id="timeRange" class="px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                            <option value="week">最近7天</option>
                            <option value="month" selected>最近30天</option>
                            <option value="quarter">最近90天</option>
                            <option value="year">最近12个月</option>
                            <option value="custom">自定义...</option>
                        </select>
                    </div>

                    <div class="flex items-center">
                        <span class="text-gray-600 mr-2">供应商:</span>
                        <select id="supplier" class="px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                            <option value="all" selected>全部供应商</option>
                            <option value="supplier1">供应商A</option>
                            <option value="supplier2">供应商B</option>
                            <option value="supplier3">供应商C</option>
                            <option value="supplier4">供应商D</option>
                        </select>
                    </div>

                    <div class="flex items-center">
                        <span class="text-gray-600 mr-2">物资ABC分类:</span>
                        <select id="materialABC" class="px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                            <option value="all" selected>全部分类</option>
                            <option value="a">A类物资</option>
                            <option value="b">B类物资</option>
                            <option value="c">C类物资</option>
                        </select>
                    </div>

                    <div class="flex items-center">
                        <span class="text-gray-600 mr-2">物资类别:</span>
                        <select id="materialCategory" class="px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                            <option value="all" selected>全部类别</option>
                            <option value="raw">原材料</option>
                            <option value="component">零部件</option>
                            <option value="equipment">设备</option>
                            <option value="auxiliary">辅料</option>
                            <option value="packaging">包装物</option>
                        </select>
                    </div>

                    <div class="flex items-center">
                        <span class="text-gray-600 mr-2">型号:</span>
                        <select id="model" class="px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                            <option value="all" selected>全部型号</option>
                            <option value="model1">型号A-001</option>
                            <option value="model2">型号B-002</option>
                            <option value="model3">型号C-003</option>
                            <option value="model4">型号D-004</option>
                        </select>
                    </div>

                    <div class="flex items-center">
                        <span class="text-gray-600 mr-2">领域方向:</span>
                        <select id="fieldDirection" class="px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                            <option value="all" selected>全部领域</option>
                            <option value="electronics">领域A</option>
                            <option value="mechanical">领域B</option>
                            <option value="chemical">领域C</option>
                            <option value="material">领域D</option>
                            <option value="aerospace">领域E</option>
                        </select>
                    </div>

                    <div class="flex items-center">
                        <span class="text-gray-600 mr-2">承研单位:</span>
                        <select id="researchUnit" class="px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                            <option value="all" selected>全部单位</option>
                            <option value="unit1">承研单位A</option>
                            <option value="unit2">承研单位B</option>
                            <option value="unit3">承研单位C</option>
                            <option value="unit4">承研单位D</option>
                        </select>
                    </div>
                </div>

                <div class="flex items-center">
                    <button id="applyFilter" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg transition-colors flex items-center">
                        <i class="fa fa-filter mr-2"></i>
                        <span>应用筛选</span>
                    </button>
                    <button id="resetFilter" class="ml-2 text-gray-600 hover:text-gray-800 px-4 py-2 rounded-lg transition-colors flex items-center">
                        <i class="fa fa-refresh mr-2"></i>
                        <span>重置</span>
                    </button>
                </div>
            </div>
        </div>

        <!-- 一级驾驶舱 - 计划管理 -->
        <section id="plan-management" class="mb-8">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-2xl font-bold text-dark">计划管理</h2>
                <div class="text-sm text-gray-500"></div>
            </div>

            <!-- 采购计划基础指标 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('planAchievement')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">采购计划达成率</h3>
                        <i class="fa fa-check-circle text-success"></i>
                    </div>
                    <p class="text-2xl font-bold">94.2%</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +2.1%</span>
                        <span class="text-success">环比 +0.8%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('planAccuracy')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">采购计划准确率</h3>
                        <i class="fa fa-bullseye text-primary"></i>
                    </div>
                    <p class="text-2xl font-bold">87.5%</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +3.8%</span>
                        <span class="text-success">环比 +1.5%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('unplannedRatio')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">计划外采购占比</h3>
                        <i class="fa fa-exclamation-triangle text-warning"></i>
                    </div>
                    <p class="text-2xl font-bold">12.5%</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 -2.1%</span>
                        <span class="text-success">环比 -0.8%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('planEfficiency')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">计划执行效率</h3>
                        <i class="fa fa-tachometer text-info"></i>
                    </div>
                    <p class="text-2xl font-bold">91.8%</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +4.1%</span>
                        <span class="text-warning">环比 -1.2%</span>
                    </div>
                </div>
            </div>

            <!-- 计划管理趋势图表 -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">采购计划达成率趋势</h3>
                        <button onclick="showDetail('planAchievementTrend')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    <div class="h-64">
                        <canvas id="planAchievementChart"></canvas>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">计划外采购占比趋势</h3>
                        <button onclick="showDetail('unplannedTrend')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    <div class="h-64">
                        <canvas id="unplannedRatioChart"></canvas>
                    </div>
                </div>
            </div>
        </section>

        <!-- 一级驾驶舱 - 采购执行 -->
        <section id="purchase-execution" class="mb-8">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-2xl font-bold text-dark">采购执行</h2>
                <div class="text-sm text-gray-500"></div>
            </div>

            <!-- 订单执行指标 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('orderCompletion')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">采购订单完成率</h3>
                        <i class="fa fa-check-square text-success"></i>
                    </div>
                    <p class="text-2xl font-bold">96.8%</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +1.5%</span>
                        <span class="text-success">环比 +0.3%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('supplyTimeliness')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">供给及时率</h3>
                        <i class="fa fa-clock-o text-primary"></i>
                    </div>
                    <p class="text-2xl font-bold">93.2%</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +2.8%</span>
                        <span class="text-success">环比 +1.2%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('qualityRate')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">采购质量合格率</h3>
                        <i class="fa fa-award text-warning"></i>
                    </div>
                    <p class="text-2xl font-bold">98.7%</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +0.5%</span>
                        <span class="text-success">环比 +0.2%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('costAchievement')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">采购成本达成率</h3>
                        <i class="fa fa-rmb text-info"></i>
                    </div>
                    <p class="text-2xl font-bold">95.4%</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +1.8%</span>
                        <span class="text-warning">环比 -0.5%</span>
                    </div>
                    </div>
                </div>

            <!-- 周期分析指标 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('arrivalCycle')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">移动平均到货周期</h3>
                        <i class="fa fa-truck text-secondary"></i>
                    </div>
                    <p class="text-2xl font-bold">15.5天</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 -2.1天</span>
                        <span class="text-success">环比 -0.8天</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('warehouseCycle')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">移动平均入库周期</h3>
                        <i class="fa fa-warehouse text-primary"></i>
                    </div>
                    <p class="text-2xl font-bold">2.8天</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 -0.5天</span>
                        <span class="text-success">环比 -0.2天</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('inventoryTime')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">移动平均库存时间</h3>
                        <i class="fa fa-clock text-warning"></i>
                    </div>
                    <p class="text-2xl font-bold">28.5天</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 -3.2天</span>
                        <span class="text-success">环比 -1.5天</span>
                </div>
            </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('purchaseEfficiency')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">采购效率指数</h3>
                        <i class="fa fa-tachometer text-info"></i>
                    </div>
                    <p class="text-2xl font-bold">92.6%</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +3.1%</span>
                        <span class="text-success">环比 +1.8%</span>
                    </div>
                </div>
            </div>

            <!-- 采购执行趋势图表 -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">采购周期趋势</h3>
                        <button onclick="showDetail('purchaseCycleTrend')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    <div class="h-64">
                        <canvas id="purchaseCycleChart"></canvas>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">质量与成本趋势</h3>
                        <button onclick="showDetail('qualityCostTrend')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    <div class="h-64">
                        <canvas id="qualityCostChart"></canvas>
                    </div>
                </div>
            </div>
        </section>

        <!-- 一级驾驶舱 - 库存运营 -->
        <section id="inventory-operation" class="mb-8">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-2xl font-bold text-dark">库存运营</h2>
                <div class="text-sm text-gray-500"></div>
            </div>

            <!-- 库存健康指标 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('inventoryAmount')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">库存总金额</h3>
                        <i class="fa fa-rmb text-primary"></i>
                    </div>
                    <p class="text-2xl font-bold">¥1280万元</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +5.2%</span>
                        <span class="text-warning">环比 +2.1%</span>
                        </div>
                        </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('inventoryTurnover')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">库存周转率</h3>
                        <i class="fa fa-refresh text-secondary"></i>
                    </div>
                    <p class="text-2xl font-bold">8.5次</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +0.8次</span>
                        <span class="text-success">环比 +0.3次</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('inventoryCostRate')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">库存持有成本率</h3>
                        <i class="fa fa-percentage text-warning"></i>
                    </div>
                    <p class="text-2xl font-bold">3.2%</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 -0.5%</span>
                        <span class="text-success">环比 -0.2%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('stagnantRatio')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">呆滞库存占比</h3>
                        <i class="fa fa-exclamation-triangle text-danger"></i>
            </div>
                    <p class="text-2xl font-bold">8.7%</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 -1.2%</span>
                        <span class="text-success">环比 -0.5%</span>
                    </div>
                </div>
            </div>

            <!-- 库存分析图表 -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">库存天数TOP5</h3>
                        <button onclick="showDetail('inventoryDaysTop5')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    <div class="h-64">
                        <canvas id="inventoryDaysChart"></canvas>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">库存周转趋势</h3>
                        <button onclick="showDetail('inventoryTurnoverTrend')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    <div class="h-64">
                        <canvas id="inventoryTurnoverChart"></canvas>
                    </div>
                </div>
            </div>
        </section>

        <!-- 一级驾驶舱 - 金额流转 -->
        <section id="amount-flow" class="mb-8">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-2xl font-bold text-dark">金额流转</h2>
                <div class="text-sm text-gray-500"></div>
            </div>

            <!-- 金额链路指标 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4 mb-6">
                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('demandAmount')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">需求总金额</h3>
                        <i class="fa fa-shopping-cart text-primary"></i>
                    </div>
                    <p class="text-2xl font-bold">¥1520万元</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +8.5%</span>
                        <span class="text-success">环比 +3.2%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('purchaseAmount')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">采购总金额</h3>
                        <i class="fa fa-credit-card text-secondary"></i>
                    </div>
                    <p class="text-2xl font-bold">¥1480万元</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +7.8%</span>
                        <span class="text-success">环比 +2.9%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('arrivalAmount')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">到货总金额</h3>
                        <i class="fa fa-truck text-warning"></i>
                    </div>
                    <p class="text-2xl font-bold">¥1420万元</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +6.9%</span>
                        <span class="text-success">环比 +2.5%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('warehouseAmount')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">入库总金额</h3>
                        <i class="fa fa-warehouse text-info"></i>
                    </div>
                    <p class="text-2xl font-bold">¥1390万元</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +6.5%</span>
                        <span class="text-success">环比 +2.3%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('outboundAmount')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">出库总金额</h3>
                        <i class="fa fa-sign-out text-success"></i>
                    </div>
                    <p class="text-2xl font-bold">¥1350万元</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +6.2%</span>
                        <span class="text-success">环比 +2.1%</span>
                    </div>
                    </div>
                </div>

            <!-- 效率分析指标 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('avgOrderAmount')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">均单金额</h3>
                        <i class="fa fa-calculator text-primary"></i>
                    </div>
                    <p class="text-2xl font-bold">¥15.6万元</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +5.2%</span>
                        <span class="text-success">环比 +1.8%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('avgSupplierAmount')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">均企金额</h3>
                        <i class="fa fa-building text-secondary"></i>
                    </div>
                    <p class="text-2xl font-bold">¥29.8万元</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +4.8%</span>
                        <span class="text-success">环比 +1.5%</span>
                </div>
            </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('purchaseRevenueRatio')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">采购占收入比</h3>
                        <i class="fa fa-percentage text-warning"></i>
                    </div>
                    <p class="text-2xl font-bold">65.8%</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 -2.1%</span>
                        <span class="text-success">环比 -0.8%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('purchaseOutputRatio')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">采购占产值比</h3>
                        <i class="fa fa-industry text-info"></i>
                    </div>
                    <p class="text-2xl font-bold">58.2%</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 -1.8%</span>
                        <span class="text-success">环比 -0.6%</span>
                    </div>
                </div>
            </div>

            <!-- 金额流转趋势图表 -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">物料金额帕累托分析</h3>
                        <button onclick="showDetail('materialPareto')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    
                    <!-- Tab切换选项 -->
                    <div class="flex flex-wrap gap-2 mb-4">
                        <button class="tab-btn active px-3 py-1.5 text-sm rounded-lg transition-colors" data-tab="inventory">
                            按库存
                        </button>
                        <button class="tab-btn px-3 py-1.5 text-sm rounded-lg transition-colors" data-tab="demand">
                            按需求
                        </button>
                        <button class="tab-btn px-3 py-1.5 text-sm rounded-lg transition-colors" data-tab="purchase">
                            按采购
                        </button>
                        <button class="tab-btn px-3 py-1.5 text-sm rounded-lg transition-colors" data-tab="arrival">
                            按到货
                        </button>
                        <button class="tab-btn px-3 py-1.5 text-sm rounded-lg transition-colors" data-tab="warehouse">
                            按入库
                        </button>
                        <button class="tab-btn px-3 py-1.5 text-sm rounded-lg transition-colors" data-tab="outbound">
                            按出库
                        </button>
                    </div>
                    
                    <div class="h-64">
                        <canvas id="materialParetoChart"></canvas>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">型号金额TOP5</h3>
                        <button onclick="showDetail('modelAmountTop5')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    
                    <!-- Tab切换选项 -->
                    <div class="flex flex-wrap gap-2 mb-4">
                        <button class="model-tab-btn active px-3 py-1.5 text-sm rounded-lg transition-colors" data-tab="inventory">
                            按库存
                        </button>
                        <button class="model-tab-btn px-3 py-1.5 text-sm rounded-lg transition-colors" data-tab="demand">
                            按需求
                        </button>
                        <button class="model-tab-btn px-3 py-1.5 text-sm rounded-lg transition-colors" data-tab="purchase">
                            按采购
                        </button>
                        <button class="model-tab-btn px-3 py-1.5 text-sm rounded-lg transition-colors" data-tab="arrival">
                            按到货
                        </button>
                        <button class="model-tab-btn px-3 py-1.5 text-sm rounded-lg transition-colors" data-tab="warehouse">
                            按入库
                        </button>
                        <button class="model-tab-btn px-3 py-1.5 text-sm rounded-lg transition-colors" data-tab="outbound">
                            按出库
                        </button>
                    </div>
                    
                    <div class="h-64">
                        <canvas id="modelAmountTop5Chart"></canvas>
                    </div>
                </div>
            </div>
        </section>

        <!-- 一级驾驶舱 - 物料品类 -->
        <section id="material-category" class="mb-8">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-2xl font-bold text-dark">物料品类</h2>
                <div class="text-sm text-gray-500"></div>
            </div>

            <!-- 品类管理指标 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('materialTypes')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">物料种数</h3>
                        <i class="fa fa-cubes text-primary"></i>
                    </div>
                    <p class="text-2xl font-bold">1,256</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +8.5%</span>
                        <span class="text-success">环比 +2.1%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('newMaterialTypes')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">新增物料种数</h3>
                        <i class="fa fa-plus-circle text-secondary"></i>
                    </div>
                    <p class="text-2xl font-bold">89</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +12.3%</span>
                        <span class="text-success">环比 +3.8%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('materialStandardization')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">物料标准化率</h3>
                        <i class="fa fa-check-square text-warning"></i>
                    </div>
                    <p class="text-2xl font-bold">78.5%</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +5.2%</span>
                        <span class="text-success">环比 +1.8%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('materialEfficiency')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">品类管理效率</h3>
                        <i class="fa fa-tachometer text-info"></i>
                    </div>
                    <p class="text-2xl font-bold">85.2%</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +3.1%</span>
                        <span class="text-success">环比 +1.2%</span>
                    </div>
                </div>
            </div>

            <!-- 物料品类分析图表 -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">物资类别金额占比</h3>
                        <button onclick="showDetail('materialCategoryRatio')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    
                    <!-- Tab切换选项 -->
                    <div class="flex flex-wrap gap-2 mb-4">
                        <button class="category-tab-btn active px-3 py-1.5 text-sm rounded-lg transition-colors" data-tab="inventory">
                            按库存
                        </button>
                        <button class="category-tab-btn px-3 py-1.5 text-sm rounded-lg transition-colors" data-tab="demand">
                            按需求
                        </button>
                        <button class="category-tab-btn px-3 py-1.5 text-sm rounded-lg transition-colors" data-tab="purchase">
                            按采购
                        </button>
                        <button class="category-tab-btn px-3 py-1.5 text-sm rounded-lg transition-colors" data-tab="arrival">
                            按到货
                        </button>
                        <button class="category-tab-btn px-3 py-1.5 text-sm rounded-lg transition-colors" data-tab="warehouse">
                            按入库
                        </button>
                        <button class="category-tab-btn px-3 py-1.5 text-sm rounded-lg transition-colors" data-tab="outbound">
                            按出库
                        </button>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="h-64 flex items-center justify-center">
                            <canvas id="materialCategoryChart"></canvas>
                        </div>
                        <div class="flex flex-col justify-center">
                            <div class="space-y-3" id="materialCategoryLegend">
                                <!-- 图例将通过JavaScript动态生成 -->
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">新增物料趋势</h3>
                        <button onclick="showDetail('newMaterialTrend')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    <div class="h-64">
                        <canvas id="newMaterialTrendChart"></canvas>
                    </div>
                </div>
            </div>
        </section>

        <!-- 一级驾驶舱 - 供应商管理 -->
        <section id="supplier-management" class="mb-8">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-2xl font-bold text-dark">供应商管理</h2>
                <div class="text-sm text-gray-500"></div>
            </div>

            <!-- 供应商结构指标 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('supplierCount')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">供应商数量</h3>
                        <i class="fa fa-building text-primary"></i>
                    </div>
                    <p class="text-2xl font-bold">486</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +5.8%</span>
                        <span class="text-success">环比 +1.2%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('newSupplierCount')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">新增供应商数量</h3>
                        <i class="fa fa-plus text-secondary"></i>
                    </div>
                    <p class="text-2xl font-bold">32</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +15.2%</span>
                        <span class="text-success">环比 +4.8%</span>
                </div>
            </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('singleSourceRatio')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">单一来源采购占比</h3>
                        <i class="fa fa-exclamation-triangle text-warning"></i>
                    </div>
                    <p class="text-2xl font-bold">18.5%</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 -2.1%</span>
                        <span class="text-success">环比 -0.8%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('supplierRisk')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">高风险供应商数量</h3>
                        <i class="fa fa-exclamation-circle text-danger"></i>
                    </div>
                    <p class="text-2xl font-bold">12</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 -25.0%</span>
                        <span class="text-success">环比 -8.3%</span>
                    </div>
                </div>
            </div>

            <!-- 供应商分析图表 -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">供应商金额帕累托分析</h3>
                        <button onclick="showDetail('supplierParetoAnalysis')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    <div class="h-64">
                        <canvas id="supplierParetoChart"></canvas>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">供应商风险TOP5</h3>
                        <button onclick="showDetail('supplierRiskTop5')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    <div class="h-64 overflow-y-auto">
                        <table class="w-full text-sm">
                            <thead>
                                <tr class="border-b border-gray-200">
                                    <th class="text-left py-2">排名</th>
                                    <th class="text-left py-2">供应商名称</th>
                                    <th class="text-right py-2">风险评分</th>
                                    <th class="text-right py-2">风险类型</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="border-b border-gray-100">
                                    <td class="py-2">1</td>
                                    <td class="py-2 font-medium">供应商A</td>
                                    <td class="py-2 text-right text-danger">高风险</td>
                                    <td class="py-2 text-right">交付风险</td>
                                </tr>
                                <tr class="border-b border-gray-100">
                                    <td class="py-2">2</td>
                                    <td class="py-2 font-medium">供应商B</td>
                                    <td class="py-2 text-right text-warning">中风险</td>
                                    <td class="py-2 text-right">质量风险</td>
                                </tr>
                                <tr class="border-b border-gray-100">
                                    <td class="py-2">3</td>
                                    <td class="py-2 font-medium">供应商C</td>
                                    <td class="py-2 text-right text-warning">中风险</td>
                                    <td class="py-2 text-right">财务风险</td>
                                </tr>
                                <tr class="border-b border-gray-100">
                                    <td class="py-2">4</td>
                                    <td class="py-2 font-medium">供应商D</td>
                                    <td class="py-2 text-right text-warning">中风险</td>
                                    <td class="py-2 text-right">交付风险</td>
                                </tr>
                                <tr>
                                    <td class="py-2">5</td>
                                    <td class="py-2 font-medium">供应商E</td>
                                    <td class="py-2 text-right text-warning">中风险</td>
                                    <td class="py-2 text-right">质量风险</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </section>
    </div>
</main>

<!-- 穿透查询模态框 -->
<div id="detailModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center">
    <div class="bg-white rounded-xl w-full max-w-6xl max-h-[90vh] overflow-hidden flex flex-col">
        <div class="p-5 border-b border-gray-200 flex justify-between items-center">
            <h3 class="text-lg font-semibold" id="modalTitle">详细分析</h3>
            <button id="closeModal" class="text-gray-500 hover:text-gray-700">
                <i class="fa fa-times"></i>
            </button>
        </div>
        <div class="p-5 overflow-y-auto flex-1" id="modalContent">
            <!-- 这里将通过JavaScript动态填充内容 -->
        </div>
        <div class="p-5 border-t border-gray-200 flex justify-end">
            <button id="closeModalBtn" class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg transition-colors">
                关闭
            </button>
        </div>
    </div>
</div>

<!-- JavaScript 代码 -->
<script src="materials.js"></script>
</body>
</html> 